<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <style>
         .main-container {
         	font-family: SF-UI-Text-Regular;
	        width: 13cm;
   		margin: 0 auto;
    		padding: 20px;
		background-color: #D3D3D3;
   	
         }
 
         .float-left {
         float: left;
         }
         .float-right {
         float: right;
         }
         .section {
         /*border: 1px solid #CCC;*/
         /*padding: 20px;*/			
         padding-Top: 13px;
         margin-bottom: 16px;
         margin-Top: 20px;
         }
         .section-details p {
         color: #126089;
         /*font-size: 16px;*/
         }
         .grouper {
         overflow: hidden;			
         }	
         .grid-50 {
         width: 47%;
         }	
         @font-face {
         font-family: 'SF-UI-Text-Regular'; 
         src: url("https://s3-ap-southeast-1.amazonaws.com/content.staging.whitecoat.global/PDF/Templates/fonts/SF-UI-Text-Regular.otf");
         font-style: normal;
         }
         h1 {
         font-size: 22px;
         font-family: 'SF-UI-Text-Regular';			
         }
         .h1-main {
         margin-top: 90px;
         }
         p { 
         margin: 0 0 10px 0; 
         font-family: 'SF-UI-Text-Regular';		    
         font-size: 15px;
         }
         .p-spec {
         color: #149a9a;
         font-weight: bold;
         }
         .margin-b-30 {
         margin-bottom: 30px;
         }
      </style>
   </head>
   <body>
      <div class="main-container">
	  	 <div style="display:${data.visible!};margin-bottom: 10px">
	    <p style='font-weight: bold'>${data.partnershipWithText!}</p>
	    <img src="https://s3-ap-southeast-1.amazonaws.com/content.staging.whitecoat.global/PDF/Templates/Images/logo_whitecoat_v2.png">	 
	 </div>	
	<div style="background-color: #fff;padding: 20px;">
         <div class="main-header grouper" style="background-color:white;padding: 20px 0px 0px 0px;">
            <div style="margin-bottom: 13px;border-bottom: 1px solid #D3D3D3">
               <img style="max-width:250px;max-height: 150px;margin-bottom: 13px"  src="${data.doctorClinicLogo!}" class="float-left">
               <!--<div class="float-right">
                  <h1>Memo</h1>
               </div>-->
	       <div style="padding-top: 13px; border-Top: 1px solid #D3D3D3;clear: both;display:${data.visiblePatientClinic!}"></div>
	       <img  style="padding-bottom: 20px;max-width:250px;max-height: 150px;display:${data.visiblePatientClinic!}" src="${data.patientClinicLogo!}">
		<div style="clear: both"></div>	       
            </div>
         </div>
         <div class="main-body" style="background-color:white>
            <div class="grouper">
               <div class="grouper">
                  <div class="float-left">
                     <P>${data.idNoText!}:</P>
                     <P>${data.nameText!}:</P>
                     <P>${data.visitDateText!}:</P>
                  </div>
                  <div class="grid-50 float-left" style='padding-left: 20px;'>
                     <P><strong>${data.idNo!}</strong></P>
                     <P><strong>${data.name!}</strong></P>
                     <P><strong>${data.visitDate!}</strong></P>
                  </div>
               </div>
               <div class="section" style="border-Top: 1px solid #D3D3D3;display:${data.visibleNoPatientClinic!}">
                  <p style="margin-bottom: 15px"><strong>${data.patientClinicName!}</strong><br>${data.patientClinicAddress!}<br></p>
               </div>
               <div class="section" style="margin-bottom:0px;border-bottom: 1px solid #D3D3D3;border-Top: 1px solid #D3D3D3;padding-bottom:15px;margin-top: 0px;">
				${data.memoContent!}
				<div class="section">
<#--				  ${data.memoAttachedFiles}-->
                    <#list data.memoAttachedFiles as item>
                        ${item!}
                    </#list>
				</div>
				${data.memoNote!}
	       </div>
               <div class="section" style="margin-top: 0px;margin-bottom:0px">
                  <img style="margin-bottom: 10px;" src="${data.doctorSign!}" width="150"><br>
                  <p style="margin-bottom: 10px;">${data.doctorName!}<br><span style="display:${data.visibleMCRNo!};">${data.MCRNoText!}: ${data.MCRNo!}</span></p>
		  <p style="margin-bottom:0px">${data.currentDate!}</p>
               </div>
         </div>
        </div>
	   <div style="padding: 20px 0 0 20px;color: #696969">${data.doctorClinicAddress!}</div>
	   <div style="padding: 20px 0 0 20px;color: #696969;display:${data.visiblePharmacyAddress!};">201 Henderson Road | Apex @ Henderson | #05-11/12 | Singapore 159545 | T: +65 6909 6609 | F: +65 6909 6606 | E: contactus@whitecoat.global</div>
      	</div>
   </body>
</html>